<template>
  <div id="login">
    <div class="login_box">
      <label for="username">用户名：</label>
      <input type="text" placeholder="请输入用户名" id="username"/>
      <label for="pass">密码：</label>
      <input type="password" placeholder="请输入密码" id="password"/>
      <input type="button" value="登录" id="submit" @click="jump"/>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        title:''
      }
    },
    methods:{
      jump:function(){
        let _this=this;
        var username=encodeURI($("#username").val());
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(res){
          if(xhr.readyState===4&&xhr.status===200){
            var json=JSON.parse(xhr.responseText);
            if(json) {
              _this.$router.push({path: '/index?username=' + username});
            }
          }
        };
        xhr.open('get',"https://www.easy-mock.com/mock/5a61b18441d8910ea886ec89/example/content",true);
        xhr.send({"username":username});
      }
    }
  }
</script>
<style scoped>
input,label{
  font-size:20px;
  width:100%;
  display: block;
  height:30px;
  margin-top:15px;
}
  .login_box{
    background-color: #eee;
    width:500px;
    margin:100px auto;
    padding:15px 20px;
  }
  #submit{
    background-color: darkgoldenrod;
  }
</style>
